<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>带边框按钮组</title>
    <style>
        .btn-group button {
            /* 绿色背景 */
            background-color: #04AA6D;
            /* 绿色边框 */
            border: 1px solid green;
            /* 白色文本 */
            color: white;
            /* 内边距离、 */
            padding: 10px 24px;
            /* 指针/手形图标 */
            cursor: pointer;
            /* 并排浮动按钮 */
            float: left;
        }

        /* 清除浮动 */
        .btn-group:after {
            content: "";
            clear: both;
            display: table;
        }

        .btn-group button:not(:last-child) {
            /* 防止边框重叠 */
            border-right: none;
        }

        /* 鼠标移动到按钮上的效果 */
        .btn-group button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>

    <h1>按钮组</h1>

    <div class="btn-group">
        <button>Google</button>
        <button>Runoob</button>
        <button>Apple</button>
    </div>

</body>

</html>